<template>
  <div>
    <!-- login部分 -->
    <div style="width:100%;height:200px;">
      <div style="width:100%;text-align:center; margin-top: 50px;">
        <image :src="userInfo.avatarUrl" style="width:120px;height:120px;border-radius: 5px"></image>
      </div>
      <div style="width:100%;text-align:center;position:absolute;top:190px;">
        <text style="font-size:24px;">{{ userInfo.nickName }}</text>
      </div>
    </div>
    <!-- 授权 -->
    <div v-if="showStatus">
      <view class="icon-box" style="width:70%;display: flex; justify-content: space-around; align-items: center; margin: 0 auto">
        <icon class="icon-box-img" type="success" size="93"></icon>
        <view class="icon-box-ctn">
          <view class="icon-box-title">成功</view>
          <view class="icon-box-desc">登录授权信息顺利完成</view>
        </view>
      </view>
      <view style="text-align: center; margin: 20rpx 0;">（2s后跳转）</view>
    </div>

    <div v-else>
      <div style="margin-top:20px; text-align: center;">
        <div><text style="color:#888">登陆后该应用将会获取以下权限</text></div>
        <div><text style="color:#888">-获得你的公开信息（昵称、头像等）</text></div>
      </div>
      <div style="width:100%; display: flex; justify-content: space-around; margin-top: 40rpx;">
        <button plain="true" style="background:#1AAc19;color:#fff;border:none; width: 200rpx;"
                open-type="getUserInfo" @getuserinfo="onGotUserInfo">登录</button>
        <button style="background:#1AAc19;color:#fff;border:none"
                open-type="getPhoneNumber" @bindgetphonenumber="getPhoneNumber">获取手机号</button>
      </div>
    </div>

  </div>
</template>
<script>
import { decryptData, wxLogin } from "../../../utils/wxUtil";

export default {
  data() {
    return {
      active: 2,
      code: "",
      userInfo: {
        nickName: '我XXX平台',
        avatarUrl: '/static/imgs/title.jpg'
      },
      showStatus: false,
      timer: ''
    };
  },
  methods: {
    //授权
    async onGotUserInfo(e) {
      var errMsg = e.mp.detail.errMsg;
      if (errMsg == "getUserInfo:fail auth deny") {
        console.log("登录失败");
      } else {
        console.log("获取用户信息" + JSON.stringify(e.mp.detail.userInfo));
        this.userInfo = e.mp.detail.userInfo
        wx.setStorageSync('user_info', this.userInfo)
        this.showStatus = wx.getStorageSync("user_info") ? true:false
        // this.$router.push({
        //   path: "/pages/myPage/myPage",
        //   isTab: true
        // });
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout( () =>{
          this.$router.push({
            path: "/pages/myPage/myPage",
            isTab: true
          });
        },  2000);
        // 字符串
        // this.$router.push('/pages/news/detail')
        // 对象
        // this.$router.push({ path: '/pages/news/detail' })
        // 带查询参数，变成 /pages/news/detail?id=1
        // this.$router.push({ path: '/pages/news/detail', query: { id: 1 } })
        // 切换至 tabBar 页面
        // this.$router.push({ path: '/pages/news/list', isTab: true })
        // 重启至某页面，无需指定是否为 tabBar 页面，但 tabBar 页面无法携带参数
        // this.$router.push({ path: '/pages/news/list', reLaunch: true })
        // 关闭当前页面，返回上一页面或多级页面，n 为回退层数，默认值为 1

        /**注意： 返回tab页面需要加上 isTab: true*/

        // this.$router.go(n)
        // 关闭当前页面，返回上一页面
        // this.$router.back()

        // let encryptedData = e.mp.detail.encryptedData;
        // let iv = e.mp.detail.iv;
        // let userInfo = await decryptData(encryptedData, iv, this.code);
        // this.$router.push({
        //   path: "/pages/index",
        //   reLaunch: true
        // });
      }
    },
    async getPhoneNumber (e) {
      console.log(e.detail.errMsg)
      console.log(e.detail.iv)
      console.log(e.detail.encryptedData)
    }
  },
  async beforeMount() {
    this.code = await wxLogin();
    this.showStatus = wx.getStorageSync("user_info") ? true:false
  }
};
</script>
<style scoped>
</style>
